<template>
  <div>
    <!-- 数据总量 -->
    <el-card v-for="(item,index) in getHome.statistics" :key="index">
      <h3>{{item.type == 'all'? "数据总量":"昨日新增数据"}}</h3>
      <div class="database">
        <div class="all_total">
          <div class="title">{{item.type == 'all'? "用户总数":"用户数"}}</div>
          <div class="price">{{item.utilizerQuantity}}</div>
        </div>
        <div class="all_total">
          <div class="title">{{item.type == 'all'? "挑战总次数":"挑战次数"}}</div>
          <div class="price">{{item.answerQuantity}}</div>
        </div>
        <div class="all_total">
          <div class="title">{{item.type == 'all'? "累计发放积分":"发放积分"}}</div>
          <div class="price">{{item.issuePointSum}}</div>
        </div>
	<div class="all_total">
	  <div class="title">{{item.type == 'all'? "累计消耗积分":"消耗积分"}}</div>
	  <div class="price">{{item.expendPointSum}}</div>
	</div>
      </div>
    </el-card>
    <!-- 社区用户累计获取积分排名-->
    <el-row :gutter="80">
      <el-col :span="12">
        <el-card>
          <h3 class="list_title">社区用户累计获取积分排名</h3>
          <el-table :data="community" stripe style="width: 100%">
            <el-table-column type="index"></el-table-column>
	    <el-table-column prop="name" width="260"></el-table-column>
	    <el-table-column >
	      <template slot-scope="scope">
	        {{scope.row.sum}}
	      </template>
	    </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <!-- 用户累计获取积分排名 -->
      <el-col :span="12">
        <el-card>
          <h3 class="list_title">用户累计获取积分排名</h3>
          <el-table :data="utilizer" stripe style="width: 100%">
	    <el-table-column   type="index"></el-table-column>
            <el-table-column prop="name" width="260"></el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                {{scope.row.sum}}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!-- 日活跃人数（DAU） -->
    <!-- <el-row :gutter="80">
      <el-col :span="12">
        <el-card>
          <h3 class="list_title">日活跃人数（DAU）</h3>
          <el-table :data="rechargeGoodsaorder" stripe style="width: 100%">
            <el-table-column type="index" width="80"></el-table-column>
            <el-table-column prop="goods_name" width="180"></el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                {{scope.row.quantity}}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row> -->
    <!-- 日活跃率% -->
    <!-- <el-row :gutter="80">
      <el-col :span="12">
        <el-card>
          <h3 class="list_title">日活跃率%</h3>
          <el-table :data="rechargeConsumer" stripe style="width: 100%">
    	    <el-table-column type="index" width="80"></el-table-column>
            <el-table-column type="aa" width="80"></el-table-column>
            <el-table-column prop="consumer_petname" width="300"></el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                {{scope.row.recharge}}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import {getHome} from "../api/index"
export default {
  data() {
   
    return {
    // 数据总量
    getHome:{},
    // 社区用户累计获取积分排名
    utilizer:[],
    community:[]
    }
  },
  created(){
    this.getgetHome()

  },
  methods:{
    // 获取数据总量
    async getgetHome(){
      const res=await getHome()
      this.getHome=res.data.home;
      res.data.home.utilizersOrCommunities.forEach(item=>{
	      if(item.type== "utilizer") {
		   this.utilizer.push(item)
	      }else{
		   this.community.push(item)
	      }
      });
      
    },
}

};
</script>

<style lang="less" scoped>
.el-card {
  margin-bottom: 20px;
}
.database {
  display: flex;
}
.all_total {
  width: 320px;
  height: 192px;
  background-color: #f2f2f2;
  text-align: center;
  overflow: hidden;
  margin-top: 20px;
  margin-right: 95px;
  .title {
    margin: 40px 0 30px 0;
    font-size: 32rpx;
    font-weight: bold;
  }
  .price {
    font-size: 38px;
    font-weight: bold;
  }
}
.list_title{
  /* margin-bottom: 30px; */
}
</style>